<template>
  <div class="toolbar">
    <div class="item" v-for="item in toolbarList" :key="item.type">
      <img :src="item.icon" :title="item.title" @click="clickSelect(item)" :style="{background: item.type === currentItem ? '#c4c2c2' : ''}"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {dbClickCancel, toolbarList} from "../config";
import {ToolbarType} from "../util/types.d.ts";
import {ref} from "vue";
import {useOperate} from "../util/hook.ts";
import {OperateEnum} from "../util/enum.ts";

let currentItem = ref<string>('');
function clickSelect(data: ToolbarType) {
  const type = data.type;
  if (dbClickCancel.includes(currentItem.value) && currentItem.value === type) {
    currentItem.value = '';
  } else {
    currentItem.value = type;
  }
  useOperate(currentItem.value as OperateEnum);
}
</script>

<style scoped>

</style>
